
<template>
  <el-row>
    <el-descriptions column="2" >
      <el-descriptions-item label="当前项目数量" width="300px">{{counts.countProjects}}</el-descriptions-item>
      <el-descriptions-item label="我的项目数量">{{counts.countMyProjects}}</el-descriptions-item>
      <el-descriptions-item label="我的代办任务数量">{{counts.countMyTaskStatus}}</el-descriptions-item>
      <el-descriptions-item label="我的已完成任务数量">{{counts.countMyTaskNoStatus}}</el-descriptions-item>
    </el-descriptions>
  </el-row>


  <!-- 任务列表 -->
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-table :data="tasks" border stripe
                row-key="taskId"

                ref="taskTable">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="taskId" label="#">
          <template #default="scope">
            <el-link @click="showDetail(scope.row)" type="success">
              {{ scope.row.taskId }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="taskTitle" label="任务标题"/>
        <el-table-column prop="user.userName" label="负责人"/>
        <el-table-column label="任务工期" prop="taskDuration"/>
        <el-table-column prop="startTime" label="开始时间"/>
        <el-table-column prop="endTime" label="结束时间"/>
        <el-table-column prop="taskStatus" label="项目状态">
          <template #default="scope">
            <el-tag type="info" v-if="scope.row.taskStatus == 1">正常</el-tag>
            <el-tag type="primary" v-else-if="scope.row.taskStatus == 2">暂停</el-tag>
            <el-tag type="info" v-else-if="scope.row.taskStatus == 3">完成</el-tag>
            <el-tag type="primary" v-else-if="scope.row.taskStatus == 4">代办</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"/>

        <el-table-column label="操作" width="330">
            <template #default="scope">
              <el-button size="small" type="primary" @click="changeSubtask(scope.row)">编辑</el-button>
              <el-button size="small" type="primary" @click="toTask(scope.row)">任务</el-button>
            </template>
        </el-table-column>

      </el-table>
    </el-col>
  </el-row>



  <!-- 任务编号详情项目的弹窗 -->
  <el-dialog v-model="taskIdListWinDialogVisible"
             title="任务详情"
             width="50%"
  >

    <el-descriptions column="2">
      <el-descriptions-item label="任务标题">{{rowTask.taskTitle}}</el-descriptions-item>
      <el-descriptions-item label="任务简介">{{rowTask.taskDesc}}</el-descriptions-item>
      <el-descriptions-item label="任务开始时间">{{rowTask.startTime}}</el-descriptions-item>
      <el-descriptions-item label="任务结束时间">{{rowTask.endTime}}</el-descriptions-item>
      <el-descriptions-item label="工期">{{rowTask.taskDuration}}</el-descriptions-item>
      <el-descriptions-item label="进度">{{rowTask.taskProgress}}</el-descriptions-item>
      <el-descriptions-item label="负责人">
        <template v-if="!rowTask.user || rowTask.user.userName == null">
          无
        </template>
        <template v-else>
          {{rowTask.user.userName}}
        </template>
      </el-descriptions-item>

    </el-descriptions>



  </el-dialog>



  <!-- 编辑子任务的弹窗 -->
  <el-dialog v-model="changeTaskWinDialogVisible"
             title="新增任务"
             width="50%"
  >

    <el-form :model="rowTask">

      <el-form-item label="任务标题">
        <el-input v-model="rowTask.taskTitle"/>
      </el-form-item>
      <el-form-item label="任务简介">
        <el-input v-model="rowTask.taskDesc"/>
      </el-form-item>

      <el-form-item label="开始时间">
        <el-date-picker
            v-model="rowTask.startTime"
            type="date"
            placeholder="Pick a day"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>

      <el-form-item label="结束时间">
        <el-date-picker
            v-model="rowTask.endTime"
            type="date"
            placeholder="Pick a day"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>

      <el-form-item label="任务工期">
        <el-input v-model="rowTask.taskDuration"/>
      </el-form-item>
      <el-form-item label="任务进度">
        <el-input v-model="rowTask.taskProgress"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="rowTask.taskStatus">
          <el-radio :value="1" label="正常"/>
          <el-radio :value="2" label="暂停"/>
          <el-radio :value="3" label="完成"/>
          <el-radio :value="4" label="代办"/>
          <el-radio :value="99" label="删除"/>
        </el-radio-group>
      </el-form-item>


    </el-form>

    <el-button @click="changeTaskDialogVisible">取消</el-button>
    <el-button type="primary" @click="changeTaskSubtaskSubmit">
      提交
    </el-button>


  </el-dialog>













</template>

<script setup>
import {onBeforeMount, ref} from "vue";
import {ElMessage} from "element-plus";
import projectRequest from "@/api/projects.js";
import taskRequest from "@/api/task.js";
import router from "@/router/index.js";





//编辑子任务弹窗标记
let changeTaskWinDialogVisible = ref(false);
//编辑子任务
function changeSubtask(thisRowTask){
  if (thisRowTask == 1){
    thisRowTask = taskTable.value.getSelectionRows()
    rowTask.value = thisRowTask[0]
    if (thisRowTask.length > 1){
      ElMessage({
        type:"warning",
        message:"选择过多"
      });
      return;
    }
  }else {
    rowTask.value = thisRowTask;
  }

  changeTaskWinDialogVisible.value = true;
}

//取消编辑弹窗
function changeTaskDialogVisible(){
  changeTaskWinDialogVisible.value = false;
}
//编辑提交
function changeTaskSubtaskSubmit(){
  taskRequest.updateTask(rowTask.value, res=>{
    if (res.code == 200) {
      console.log(res)
      ElMessage({
        type: "success",
        message: "编辑成功"
      });
      // 关闭窗体
      changeTaskDialogVisible();
      // 刷新表格
      loadTasks(0);
    } else {
      ElMessage({
        type: "error",
        message: "编辑失败"
      });
    }
  })
}










//任务详情弹窗标记
let taskIdListWinDialogVisible = ref(false);

let rowTask = ref({})
function showDetail(thisRow){
  rowTask.value = thisRow;
  taskIdListWinDialogVisible.value = thisRow
}




//跳转到任务
function toTask(project){
  router.push("/home/task/" + project.projectId)
}





//任务列表
let tasks = ref([]);
let project = ref({});// 不需要申明为响应式对
//加载子任务
// function loadChildrenTask(task,node,resole){
//   console.log(task)
//   taskRequest.loadTaskByUserId(curUserId,task.taskId,res=>{
//     resole(res.data);
//   })
// }


//加载任务列表
function loadTasks(){

  taskRequest.loadTaskByUserId(curUserId,res=>{
    console.log(curUserId);
    tasks.value = res.data;
  })
}


// function loadProject(curUserId){
//   console.log(curUserId)
//   projectRequest.selectProjectByIdList(curUserId, res=>{
//     project.value = res.data;
//     loadTasks(0);
//   })
// }












//统计数量
let counts = ref({})
function loadCount(){
  projectRequest.count(curUserId,res=>{
    counts.value = res.data;
  })
}


let curUserId = ref(-1);
onBeforeMount(()=>{
  curUserId = localStorage.getItem("userId");
  loadTasks();
  loadCount();
})
</script>

<style scoped>

</style>